<script setup>
import { Search, Message } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { userStore } from '@/stores/user.js'
import { getUserInfo } from '../api/user.js'
defineOptions({
  name: 'NavHeader'
})
const name = ref('')
onMounted(async () => {
  const res = await getUserInfo()
  name.value = res.data.data?.nickname
})
const useStore = userStore()
const navData = ref([
  { route: '/home', value: '网站首页', children: null },
  {
    route: '/news',
    value: '新闻中心',
    children: [
      { value: '企业咨询', route: '/' },
      { value: '行业新闻', route: '/news' }
    ]
  },
  {
    route: '/productionShow',
    value: '产品展示',
    children: [
      { value: '除湿器', route: '/recomand' },
      { value: '加湿器', route: '/recomand' },
      { value: '烘干机', route: '/recomand' },
      { value: '新风净化剂', route: '/recomand' },
      { value: '移动空调', route: '/recomand' }
    ]
  },
  { route: '/recomand', value: '推荐案例', children: null },
  { route: '/service', value: '服务专区', children: null },
  { route: '/Login', value: '登陆页面', children: null }
])

const visb = ref(false)
const width = ref(window.innerWidth)
const logVis = ref(false)
const logout = () => useStore.removeUserInfo()
window.addEventListener('resize', () => (width.value = window.innerWidth))
</script>

<template>
  <header>
    <div class="mb-3">
      <div class="navbar navbar-dark container">
        <div class="d-flex align-items-center">
          <img
            src="@/assets/img/logo.png"
            style="cursor: pointer"
            class="d-block my-auto"
            alt=""
            @click="$router.push('/')"
          />
        </div>
        <div class="d-none d-md-block">
          <p>
            服务热线:
            <span class="d-inline" style="color: #103f94; font-size: 20px"
              >400-800-8888</span
            >
          </p>
          <el-input
            class="mb-3"
            placeholder="Search..."
            :suffix-icon="Search"
          ></el-input>
          <el-text v-if="useStore.userInfo.token">
            <el-popover :visible="logVis" placement="bottom" :width="160">
              <p>是否要退出登录？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="small" text @click="logVis = false"
                  >取消</el-button
                >
                <el-button size="small" type="primary" @click="logout"
                  >确定</el-button
                >
              </div>
              <template #reference>
                <el-button text @click="logVis = true"
                  >欢迎{{ name || useStore.userInfo.token }}用户</el-button
                >
              </template>
            </el-popover>
            <el-button
              @click="$router.push(`/person`)"
              :icon="Message"
              circle
              type="info"
              plain
            >
            </el-button>
          </el-text>
        </div>
        <div class="d-block d-md-none">
          <button
            @click="visb = !visb"
            class="navbar-toggler p-3"
            type="button"
            style="background-color: #103f94"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </div>
    </div>
    <Transition :name="width > 768 && !visb ? '' : 'drop'">
      <ul
        class="nav nav-justified list-unstyled d-block d-md-flex"
        v-if="width > 768 || visb === true"
      >
        <li class="nav-item" v-for="(value, index) in navData" :key="index">
          <router-link
            :to="value.route"
            class="nav-link"
            :class="[
              index === 1 &&
              ($route.path === '/news/advice' ||
                $route.path.includes('/advice'))
                ? 'router-link-active'
                : ''
            ]"
            >{{ value.value }}</router-link
          >
          <ul class="list-group">
            <template v-if="value.children">
              <li
                class="list-group-item list-group-item-action"
                v-for="item in value.children"
                :key="item"
                @click="$router.push(item.route)"
              >
                <router-link
                  :to="item.route"
                  class="text-decoration-none text-dark bg-light"
                >
                  {{ item.value }}
                </router-link>
              </li>
            </template>
          </ul>
        </li>
      </ul>
    </Transition>
  </header>
</template>

<style scoped lang="scss">
.nav-item {
  background-color: #103f94;
  position: relative;
  .list-group {
    z-index: 50;
    display: none;
    position: absolute;
    width: 100%;
  }
  &:hover {
    .list-group {
      display: block;
    }
  }
  .nav-link {
    color: white;
    padding: 20px;
    transition: 0.5;
  }
  .nav-link:hover {
    background-color: #666768;
  }
}
.router-link-active {
  background-color: #666768;
}
.drop-enter-from,
.drop-leave-to {
  overflow: hidden;
  height: 0px;
  transition: 1s;
}
.drop-enter-to,
.drop-leave-from {
  overflow: hidden;
  height: 448px;
  transition: 1s;
}
</style>
